<template>
	<view class="u-waterfall">
		<view id="u-left-column" class="u-column">
			<view class="rankingList">
				<view class="tile">打卡排行榜</view>
				<view class="contList">
					<view class="wiew" v-for="(item,index) in hotListData" :key="index">
						<view class="imgs"><image :src="item.images | fg" mode="widthFix"></image></view>
						<view class="cont">
							<view class="font27">{{item.name}}</view>
							<view class="font19"><image src="../static/images/home_ico_dingwei-small@2x.png" mode="widthFix"></image>{{item.address}}</view>
						</view>
					</view>
					
				</view>
			</view>
			<slot name="left" :leftList="leftList"></slot>
		</view>
		<view id="u-right-column" class="u-column">
			<view class="share">
				<view class="imgs">
					<view class="bg">
						<image src="../static/images/home_ico_youjiangtitle@2x.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="shareList">
					<view class="img5">
						<image src="../static/images/home_ico_meishifenxiang@2x.png" mode="widthFix"></image>
					</view>
					<view class="cont">
						<view class="font27">美食爱分享</view>
						<view class="font19">爱生活爱美食</view>
					</view>
					<view class="links" @click="Participate()">去参与</view>
				</view>
				<view class="shareList">
					<view class="img5"><image src="../static/images/home_ico_jingxixiaodian@2x.png" mode="widthFix"></image></view>
					<view class="cont">
						<view class="font27">美食爱分享</view>
						<view class="font19">爱生活爱美食</view>
					</view>
					<view class="links" @click="Participate()">去参与</view>
				</view>
			</view>
			<slot name="right" :rightList="rightList"></slot>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		value: {
			// 瀑布流数据
			type: Array,
			required: true,
			default: function() {
				return [];
			}
		},
		// 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好
		// 单位ms
		addTime: {
			type: [Number, String],
			default: 200
		},
		// id值，用于清除某一条数据时，根据此idKey名称找到并移除，如数据为{idx: 22, name: 'lisa'}
		// 那么该把idKey设置为idx
		idKey: {
			type: String,
			default: 'id'
		}
	},
	data() {
		return {
			leftList: [],
			rightList: [],
			tempList: [],
			hotListData:[]
		}
	},
	watch: {
		copyFlowList(nVal, oVal) {
			// 取差值，即这一次数组变化新增的部分
			let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
			// 拼接上原有数据
			this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
			this.splitData();
		}
	},
	mounted() {
		this.tempList = this.cloneData(this.copyFlowList);
		this.splitData();
		// 打卡排行榜
		this.shopHot()
	},
	computed: {
		// 破坏flowList变量的引用，否则watch的结果新旧值是一样的
		copyFlowList() {
			return this.cloneData(this.value);
		}
	},
	filters:{
		fg(data){
			let imgs = data.split(',');
			return imgs[1]
		}
	},
	methods: {
		async splitData() {
			if (!this.tempList.length) return;
			let leftRect = await this.$uGetRect('#u-left-column');
			let rightRect = await this.$uGetRect('#u-right-column');
			// 如果左边小于或等于右边，就添加到左边，否则添加到右边
			let item = this.tempList[0];
			// 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
			// 数组可能变成[]，导致此item值可能为undefined
			if(!item) return ;
			if (leftRect.height < rightRect.height) {
				this.leftList.push(item);
			} else if (leftRect.height > rightRect.height) {
				this.rightList.push(item);
			} else {
				// 这里是为了保证第一和第二张添加时，左右都能有内容
				// 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
				if (this.leftList.length <= this.rightList.length) {
					this.leftList.push(item);
				} else {
					this.rightList.push(item);
				}
			}
			// 移除临时列表的第一项
			this.tempList.splice(0, 1);
			// 如果临时数组还有数据，继续循环
			if (this.tempList.length) {
				setTimeout(() => {
					this.splitData();
				}, this.addTime)
			}
		},
		// 复制而不是引用对象和数组
		cloneData(data) {
			return JSON.parse(JSON.stringify(data));
		},
		shopHot(){
			uni.request({
				url:'/shop/hot/top4',
				method:'get',
				header:{'Authorization':uni.getStorageSync('yystoken')},
				success: (obj) => {
					console.log('blog/hot/top4:',obj)
					if(obj.data.success){
						this.hotListData = obj.data.data
					}
				}
			})
		}
	}
}
</script>
 
<style lang="scss" scoped>
 
.u-waterfall {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}
 
.u-column {
	display: flex;
	// flex: 1;
	width: 49%;
	flex-direction: column;
	height: auto;
}
 
.u-image {
	width: 100%;
}
.rankingList{
	background: linear-gradient(301deg, rgba(217,153,82,0.99) 0%, #F5C37D 100%);
	border-radius: 15rpx;
	padding: 25rpx 15rpx 0;
	margin-bottom: 20rpx;
	.tile{
		color: #FFFFFF;
		font-size: 38rpx;
		font-weight: bold;
	}
	.contList{
		background: linear-gradient(360deg, rgba(255,255,255,0.99) 0%, rgba(255,255,255,0.67) 100%);
		border-radius: 15rpx 15rpx 0rpx 0rpx;
		padding: 15rpx 13rpx 30rpx;
		margin-top: 30rpx;
	}
	.wiew{
		display: flex;
		margin-bottom: 14rpx;
		.imgs{
			image{
				width: 54rpx;
				// height: auto !important;
			}
		}
		.cont {
			padding-left: 15rpx;
			.font27{
				color: #222222;
				font-size: 27rpx;
				margin-bottom: 8rpx;
				font-weight: bold;
			}
			.font19{
				font-weight: 500;
				color: #666;
				font-size: 19rpx;
				image{
					width: 20rpx;
				}
			}
		}
	}
}
.share{
	background: #FFFFFF;
	backdrop-filter: blur(6px);
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	.imgs{
		.bg{
			display: inline-block;
			padding: 6rpx 30rpx 6rpx 20rpx;
			background-color: #F3FFF7;
			border-bottom-right-radius: 12px 27px;
		}
		image{
			width: 100rpx;
		}
		margin-bottom: 10rpx;
	}
	.shareList{
		margin-bottom: 28rpx;
		display: flex;
		padding: 0 8rpx 0 15rpx;
		align-items: center;
		&:last-child{
			margin-bottom: 16rpx;
		}
		.img5{
			width: 55rpx;
			image{
				width: 55rpx;
			}
		}
		.links{
			background: #E6FFF4;
			border-radius: 33rpx;
			color: #222222;
			font-size: 19rpx;
			padding: 5rpx 16rpx;
			// width: 76rpx;
			text-align: center;
		}
		.cont{
			padding: 0 12rpx;
			.font27{
				color: #222222;
				font-size: 27rpx;
				font-weight: bold;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;				
				text-overflow: ellipsis;		
				display: -webkit-box;			
				-webkit-line-clamp: 1;			
				line-clamp: 1;					
				-webkit-box-orient: vertical;
			}
			.font19{
				color: #666666;
				font-size: 19rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;				
				text-overflow: ellipsis;		
				display: -webkit-box;			
				-webkit-line-clamp: 1;			
				line-clamp: 1;					
				-webkit-box-orient: vertical;
			}
		}
	}
	
}


</style>